<template>
  <div class="logins">
    <div class="loginCard">
      <div class="cardTitle">忘记密码</div>
      <div class="cardInput">
        <div class="input" style="margin-bottom: 16px">
          <a-input placeholder="请输入帐号" v-model="loginData.phone" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
        <div class="code" style="margin-bottom: 16px">
          <a-input style="width: 216px" placeholder="请输入验证码" v-model="loginData.captcha"></a-input>
          <a-button type="primary" :disabled="awaitTime" @click="getCode">{{!awaitTime?'获取验证码':setTime + 's重新获取'}}</a-button>
        </div>
        <div class="input" style="margin-bottom: 16px">
          <a-input placeholder="请输入密码" type="password" v-model="loginData.password" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
        <div class="input" style="margin-bottom: 36px">
          <a-input placeholder="请确认密码" type="password" v-model="loginData.password_confirmation" @change="isErr = false;isErr = ''">
            <a-tooltip slot="suffix" title="重新输入" v-if="isErr">
              <a-icon type="close-circle" style="color: rgba(255, 72, 76, 1)" />
            </a-tooltip>
          </a-input>
        </div>
      </div>
      <div class="cardErr">{{errText?errText:''}}</div>
      <a-button class="cardBtn" type="primary" @click="forget">确定修改</a-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      isErr: false,
      errText: '',
      loginData: {
        phone: '',
        password: '',
        captcha:'',
        password_confirmation:'',
      },
      setTime:60,
      timeOut:null,
      awaitTime:false,
    }
  },
  created() {
    this.loginData.phone = this.$route.query.phone
  },
  methods:{
    forget(){
      if(!this.loginData.captcha) return this.$message.info("请输入短信验证码");
      if(this.loginData.password !== this.loginData.password_confirmation) return this.$message.info("两次输入密码不一致");
      this.Api.reset(this.loginData).then(res=>{
        if(res.code !== 200) return  this.$message.info(res.msg);
        this.$router.push({path:'/login'})
      })
    },
    getCode(){
      this.Api.reset({phone: this.loginData.phone}).then(res=>{
        if(res.code !== 200) return this.$message.info(res.msg);
        this.awaitTime = true;
        this.timeOut = setInterval(()=>{
          this.setTime -= 1;
          if(this.setTime === 0){
            this.awaitTime = false;
            return clearInterval(this.timeOut)
          }
        },1000)
      })
    },
  }
}
</script>
